<template>
    <div class="iconlist">
        <ul>
            <li v-for="(item,index) in state.msg" :key="index">
                <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.icons"></use>
                </svg>
                <span>{{item.title}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
import {  reactive } from 'vue';
export default {
    name: 'IconsLists',
    setup() {
        const state = reactive({
            msg:[
                {
                    id:1,
                    icons:'#icon-tuijian',
                    title:'每日推荐',
                },
                {
                    id:2,
                    icons:'#icon-diantai',
                    title:'电台',
                },
                {
                    id:3,
                    icons:'#icon-gedan',
                    title:'歌单',
                },
                {
                    id:4,
                    icons:'#icon-bianpinghuatubiaosheji-',
                    title:'排行榜',
                },
            ]
        })
        return { state }
    }
    
};
</script>

<style lang="scss" scoped>
    .iconlist{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 10px;
        ul{
            display: flex;
            width: 100%;
            height: 100%;
            li{
                width: 25%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                .icon{
                    width: 1rem;
                    height: 1rem;
                }
            }
        }
    }
</style>